<template>
	<view class="download-placeholder" v-if="showDownload">
		<view class="app-download-link flex align-center">
			<view class="close-wrapper flex justify-center align-center" @click="closeDownload">
				<text class="iconfont1 icon-guanbi1 close-icon"></text>
			</view>
			<text class="app-logo"></text>
			<text class="app-title">打开福袋星球App,抽更多福袋</text>
			<view class="link-app" @click="openApp">立即打开</view>
		</view>
	</view>
</template>

<script>
	const day = 1000 * 60 * 60 * 24
	import config from "@/common/js/config.js"
	export default {
		name:"download-tip",
		data() {
			return {
				showDownload: false
			}
		},
		created() {
			// #ifdef H5
			//下载提示
			this.chargeShowDownload()
			// #endif
		},
		methods: {
			chargeShowDownload() {
				let showDownloadDate = uni.getStorageSync("showDownloadDate")
				if (showDownloadDate) {
					if (new Date().getTime() - new Date(showDownloadDate) > day) {
						this.showDownload = true
					}
				} else {
					this.showDownload = true
				}
			},
			openApp() {
				//在微信中
				if (this.$util.isWeiXin()) {
					uni.navigateTo({
						url: "/otherpages/pay/wx_pay/wx_pay?wx_alipay=" + location.href
					})
				} else {
					if(uni.getSystemInfoSync().platform=="android"){
						location.href = "magicBox://"
					}
					else{
						location.href=config.iosUniversalLink
					}
					setTimeout(() => {
						let hidden = window.document.hidden || window.document.webkitHidden || window.document
							.mozHidden || window.document.msHidden
						//下载app
						if (typeof(hidden) == "undefined" || hidden == false) {
							uni.getSystemInfo({
								success: (res) => {
									//如果是android
									if (res.platform == "android") {
										location.href=this.$store.state.downloadLink
									} else {
										console.log("platform is ios")
										location.href="https://apps.apple.com/cn/app/id1587849033"
									}
								}
							})

						}
					}, 3000)

				}


			},
			closeDownload() {
				this.showDownload = false
				uni.setStorageSync("showDownloadDate", new Date().getTime());
				this.$emit('closeDownload');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar-fixed{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: var(--status-bar-height);
		z-index: 100;
		background: #fff;
	}
	.download-placeholder {
		&::after {
			content: " ";
			display: block;
			height: 85rpx;
		}
	}

	.app-download-link {
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		width: 100%;
		height: 85rpx;
		background-color: #3A3A3A;
		z-index: 100;

		.close-wrapper {
			width: 60rpx;
			height: 100%;

			.close-icon {
				font-size: 24rpx;
				color: #fff;
			}
		}

		.app-logo {
			height: 68rpx;
			width: 68rpx;
			background: url("~@/static/image/app-logo.png");
			background-size: 100% 100%;
		}

		.app-title {
			flex: 1;
			color: #fff;
			font-size: 26rpx;
			text-align: center;
		}

		.link-app {
			background-color: #FE4936;
			width: 188rpx;
			height: 100%;
			line-height: 85rpx;
			font-size: 25rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
